<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--  分页样式-->
    <link type="text/css" href="../../static/movieShow.css" rel="stylesheet">
    <link rel="stylesheet" href="../../static/layui/css/layui.css">


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>  <!--引入jquery -->
    <script src="../../static/preAndNext.js"></script>
    <script src="../../static/movieRefresh.js"></script>
    <script>
        <!--  电影信息展示以及页面切换-->

        let allData, totalPage, currentPage,allType;
        let searchYaerTabel= "";
            searchYaerTabel+=
             '<input id="year-input" type="text" placeholder="请输入上映年份" value="">'+
            '<select id="label-input" name="label-input" lay-verify=""></select>'+
            '<input type="button" value="搜索"'+
            ' onClick="searchByYearTabel(document.getElementById' +
                "('year-input').value,document.getElementById" +
                "('label-input').value" +
                                    ')">';



        $(document).ready(function () {

            //全部电影初始化
            allMovie();

            //分类查看初始化
            $.ajax({
                async: true,
                url: "[[@{/label/allLabel}]]",
                type: "post",
                success: function (data) {
                    allType = "<option value='-1'>请选择一个类型</option>";
                    for (let i = 0; i < data.data.length; i++) {
                        allType+="<option value='" +
                                 data.data[i].labelid +
                                 "'>" +
                                 data.data[i].labelname +
                                 "</option>";
                    }
                }
            });



            //管理加载
            $.ajax({
                async: true,
                url: "[[@{/user/isLogin}]]",
                type: "post",
                success: function (data) {
                    if (data.code == 0) {
                        document.getElementById("userBtn").innerHTML = "请登录";
                        document.getElementById("userBtn").setAttribute("onclick", "location.href=('/user/loginPage')");
                    } else {
                        document.getElementById("userBtn").innerHTML = data.data.nickname;
                        let manage = '<a href=' +
                            '"/user/updatePage"' +
                            '>个人信息管理</a>' +
                            '<a href=' +
                            '"/user/userDescriptionPage"' +
                            '>个人画像</a>'+
                            '<a href=' +
                            '"/movie/loveListPage"' +
                            '>收藏夹</a>';


                        if (data.data.isadmin == 1) {
                            manage += '<a href=' +
                                '/user/userManagePage' +
                                '>用户管理</a>';
                            manage += '<a href=' +
                                '/movie/movieManagePage' +
                                '>影片管理</a>';

                            manage += '<a href=' +
                                '/movie/lableManagePage' +
                                '>标签管理</a>';
                        }
                        manage+= '<a type="button" '+
                                    'onclick="logout()">注销</a>';
                        document.getElementById("userManage").innerHTML=manage;
                    }
                }
            });
            return false;
        });


        //全部电影界面跳转
        function allMovie() {
                            $.ajax({
                async: true,
                url: "[[@{/movie/allMovie}]]",
                type: "post",
                success: function (data) {
                    document.getElementById("search-by-year-label").innerHTML=searchYaerTabel;
                    document.getElementById("label-input").innerHTML = allType;
                    //导航栏响应
                    document.getElementById("allMovieBtn").setAttribute("style", "background-color: #4CAF50;");
                    document.getElementById("trendMovieBtn").setAttribute("style", "");
                    document.getElementById("recommendBtn").setAttribute("style", "");
                    allData = data;
                    //获得总页数以及初始化当前页数
                    totalPage = Math.trunc(data.data.length / 10);
                    if (data.data.length % 10 != 0) totalPage += 1;
                    currentPage = 1;
                    if (totalPage == 0) currentPage = 0;
                    document.getElementById("totalPage").innerHTML = totalPage;
                    document.getElementById("currentPage").innerHTML = currentPage;
                    setMovieInfo();


                }
            });
            return false;
        }

        // 热门电影界面跳转
        function trendMovie() {
            $.ajax({
                async: true,
                url: "[[@{/movie/trendMovie}]]",
                type: "post",
                success: function (data) {
                    document.getElementById("search-by-year-label").innerHTML="";
                    //导航栏响应
                    document.getElementById("allMovieBtn").setAttribute("style", "");
                    document.getElementById("trendMovieBtn").setAttribute("style", "background-color: #4CAF50;");
                    document.getElementById("recommendBtn").setAttribute("style", "");
                    allData = data;
                    //获得总页数以及初始化当前页数
                    totalPage = Math.trunc(data.data.length / 10);
                    if (data.data.length % 10 != 0) totalPage += 1;
                    currentPage = 1;
                    if (totalPage == 0) currentPage = 0;
                    document.getElementById("totalPage").innerHTML = totalPage;
                    document.getElementById("currentPage").innerHTML = currentPage;

                    setMovieInfo();


                }
            });
            return false;
        }

        // 推荐电影界面跳转
        function recommend() {
            $.ajax({
                async: true,
                url: "[[@{/movie/recommend}]]",
                type: "post",
                success: function (data) {

                    if (data.code == "0") {
                        layer.msg(data.msg);
                    } else {
                        document.getElementById("search-by-year-label").innerHTML="";
                        refresh();
                        //导航栏响应
                        document.getElementById("allMovieBtn").setAttribute("style", "");
                        document.getElementById("trendMovieBtn").setAttribute("style", "");
                        document.getElementById("recommendBtn").setAttribute("style", "background-color: #4CAF50;");
                        allData = data;
                        //获得总页数以及初始化当前页数
                        totalPage = Math.trunc(data.data.length / 10);
                        if (data.data.length % 10 != 0) totalPage += 1;
                        currentPage = 1;
                        if (totalPage == 0) currentPage = 0;
                        document.getElementById("totalPage").innerHTML = totalPage;
                        document.getElementById("currentPage").innerHTML = currentPage;
                        setMovieInfo();
                    }

                }
            });
            return false;
        }

        //电影搜索
        //电影分类查看
        function serchByType(labelid) {

            $.ajax({
                url: '[[@{/movie/movieType}]]',    //thymeleaf在ajax中设置地址行形式
                data: {
                    labelid: labelid,   //与controller中的形参名相同
                },
                type: "POST",
                dataType: "JSON",
                success: function (data) {
                    refresh();
                    if (data.code == "1") {
                        //导航栏响应
                        allData = data;
                        //获得总页数以及初始化当前页数
                        totalPage = Math.trunc(data.data.length / 10);
                        if (data.data.length % 10 != 0) totalPage += 1;
                        currentPage = 1;
                        if (totalPage == 0) currentPage = 0;
                        document.getElementById("totalPage").innerHTML = totalPage;
                        document.getElementById("currentPage").innerHTML = currentPage;
                        setMovieInfo();
                    } else {
                        totalPage = 0;
                        currentPage = 0;
                        document.getElementById("totalPage").innerHTML = totalPage;
                        document.getElementById("currentPage").innerHTML = currentPage;
                        //登录失败，不跳转（显示错误信息）
                        layer.msg(data.msg);
                    }
                }
            });

            return false;
        }

        //电影年份查看
        function serchByYear(year) {

            $.ajax({
                url: '[[@{/movie/CategorizeMoviesByYear}]]',    //thymeleaf在ajax中设置地址行形式
                data: {
                    updateyear: year,   //与controller中的形参名相同
                },
                type: "POST",
                dataType: "JSON",
                success: function (data) {
                    refresh();
                    if (data.code == "1") {
                        //导航栏响应
                        allData = data;
                        //获得总页数以及初始化当前页数
                        totalPage = Math.trunc(data.data.length / 10);
                        if (data.data.length % 10 != 0) totalPage += 1;
                        currentPage = 1;
                        if (totalPage == 0) currentPage = 0;
                        document.getElementById("totalPage").innerHTML = totalPage;
                        document.getElementById("currentPage").innerHTML = currentPage;
                        setMovieInfo();
                    } else {
                        totalPage = 0;
                        currentPage = 0;
                        document.getElementById("totalPage").innerHTML = totalPage;
                        document.getElementById("currentPage").innerHTML = currentPage;
                        //查找不存在
                        layer.msg(data.msg);
                    }
                }
            });

            return false;
        }

        //关键词搜索
        function search(keyword) {
            refresh();
            $.ajax({
                url: '[[@{/movie/search}]]',    //thymeleaf在ajax中设置地址行形式
                data: {
                    keyword: keyword,   //与controller中的形参名相同
                },
                type: "POST",
                dataType: "JSON",
                success: function (data) {
                    refresh();
                    if (data.code == "1") {
                        //导航栏响应
                        document.getElementById("allMovieBtn").setAttribute("style", "");
                        document.getElementById("trendMovieBtn").setAttribute("style", "");
                        document.getElementById("recommendBtn").setAttribute("style", "");

                        allData = data;
                        //获得总页数以及初始化当前页数
                        totalPage = Math.trunc(data.data.length / 10);
                        if (data.data.length % 10 != 0) totalPage += 1;
                        currentPage = 1;
                        if (totalPage == 0) currentPage = 0;
                        document.getElementById("totalPage").innerHTML = totalPage;
                        document.getElementById("currentPage").innerHTML = currentPage;
                        setMovieInfo();
                    } else {
                        totalPage = 0;
                        currentPage = 0;
                        document.getElementById("totalPage").innerHTML = totalPage;
                        document.getElementById("currentPage").innerHTML = currentPage;
                        //所查找关键词不存在
                        layer.msg(data.msg);
                    }
                }
            });
            return false;
        }

        //多条件查询(年份，类型)
        function searchByYearTabel(year,labelid){

            refresh();

            if(year==""&&labelid==-1){
                allMovie();
            }
            else if(year==""){
                serchByType(labelid);
            }
            else if(labelid==-1){
                serchByYear(year);
            }
            else {
                $.ajax({
                    url: '[[@{/movie/CategorizeMoviesByYearAndLabel}]]',    //thymeleaf在ajax中设置地址行形式
                    data: {
                        updateyear: year,   //与controller中的形参名相同
                        labelid:labelid,
                    },
                    type: "POST",
                    dataType: "JSON",
                    success: function (data) {
                        refresh();
                        if (data.code == "1") {
                            allData = data;
                            //获得总页数以及初始化当前页数
                            totalPage = Math.trunc(data.data.length / 10);
                            if (data.data.length % 10 != 0) totalPage += 1;
                            currentPage = 1;
                            if (totalPage == 0) currentPage = 0;
                            document.getElementById("totalPage").innerHTML = totalPage;
                            document.getElementById("currentPage").innerHTML = currentPage;
                            setMovieInfo();
                        } else {
                            totalPage = 0;
                            currentPage = 0;
                            document.getElementById("totalPage").innerHTML = totalPage;
                            document.getElementById("currentPage").innerHTML = currentPage;
                            //所查找关键词不存在
                            layer.msg(data.msg);
                        }
                    }
                });
            }
            return false;
        }

        //点赞
        function like(movieid,heat){
            $.ajax({
                url: '[[@{/user/myfavorite/dianzan}]]',    //thymeleaf在ajax中设置地址行形式
                data: {
                    movieid: movieid,   //与controller中的形参名相同
                },
                type: "POST",
                dataType: "JSON",
                success: function (data) {
                    if(data.code=="0"){
                        layer.msg(data.msg);
                    }
                    else {
                        layer.msg(data.data);
                    }
                }
            });

            $.ajax({
                url:'[[@{/movie/detail/update}]]',    //thymeleaf在ajax中设置地址行形式
                data:{
                    movieid:movieid,
                    heat:heat+10,
                },
                type:"POST",
                dataType:"JSON",
                success:function (upData){
                }
            });

            return false;

        }

        //收藏功能
        function collect(movieid,heat){
            $.ajax({
                url: '[[@{/user/myfavorite/insert}]]',    //thymeleaf在ajax中设置地址行形式
                data: {
                    movieid: movieid,   //与controller中的形参名相同
                },
                type: "POST",
                dataType: "JSON",
                success: function (data) {
                    if(data.code=="0"){
                        layer.msg(data.msg);
                    }
                    else {
                        alert(data.data);
                        window.location.reload();
                    }
                }
            });

            $.ajax({
                url:'[[@{/movie/detail/update}]]',    //thymeleaf在ajax中设置地址行形式
                data:{
                    movieid:movieid,
                    heat:heat+100,
                },
                type:"POST",
                dataType:"JSON",
                success:function (upData){
                }
            });
            return false;
        }

        //取消收藏
        function uncollect(movieid) {

            $.ajax({
                async: false,
                url: '[[@{/user/myfavorite/delete}]]',    //thymeleaf在ajax中设置地址行形式
                data: {
                    movieid: movieid,   //与controller中的形参名相同
                },
                type: "POST",
                dataType: "JSON",
                success: function (data) {
                    if (data.code == 0) {
                        layer.msg(data.msg);
                    } else {
                        alert(data.data);
                        window.location.reload();

                    }
                }
            });
            return false;
        }


        //电影信息填入
        function setMovieInfo() {
            //标记开始以及结束位置
            let startN = (currentPage - 1) * 10;
            let stopN = currentPage * 10;
            if (stopN > totalPage * 10) stopN = totalPage * 10;
            let movieInfo = "";
            let name = "";
            let rate = "";
            let misc = "";
            let href = "";
            let td = "";
            let detailURL = "";
            let img = "";
            let imgURL = "";
            let movieid;
            let year="";

            //清空界面
            refresh();

            for (let i = startN; i < stopN; i++) {
                let label = "";
                name = "name" + (i % 10);
                rate = "rate" + (i % 10);
                href = "href" + (i % 10);
                img = "img" + (i % 10);
                misc = "misc" + (i % 10);
                year= "year"+(i % 10);
                td = "td" + (i % 10);

                imgURL = allData.data[i].movie.post;
                detailURL = allData.data[i].movie.description;
                movieid=allData.data[i].movie.movieid;
                for (let j = 0; j < allData.data[i].list.length; j++) label = label + allData.data[i].list[j].labelname + "|";

                movieInfo = '<div class="movie-content" style="display: inline;">' +
                    '<picture>' +
                    '<a id=' +
                    href +
                    ' href=""><img id=' +
                    img +
                    ' alt="无" class="movie-img" src="" style="display: block;"></a></picture>' +
                    '<div class="movie-info"></div><div class="movie-name"><span id=' +
                    name +
                    ' class="movie-name-text"></span></div><div id=' +
                     year+
                    ' class="movie-year"></div><div id='+
                    rate +
                    ' class="movie-rate"></div><div id=' +
                    misc +
                    ' class="movie-misc">' +
                    label +
                    '</div></div><div style="display: inline-block"><button style="background-color:transparent;border-style:none;" type="button" onClick="like(' +
                    movieid+
                    ","+
                    allData.data[i].movie.heat+
                    ')"><i class="layui-icon layui-icon-praise" style="font-size: 30px"></i></button>';
                    // alert(checkLink(movieid));
                    // movieInfo+=checkLike(movieid);
                //收藏判断
                $.ajax({
                    async: false,
                    url: '[[@{/user/myfavorite/isLiked}]]',    //thymeleaf在ajax中设置地址行形式
                    data: {
                        movieid: movieid,   //与controller中的形参名相同
                    },
                    type: "POST",
                    dataType: "JSON",
                    success: function (data) {

                        if(data.code=="0"){
                            movieInfo+='<button style="background-color:transparent;border-style:none;" type="button" onClick="collect(' +
                                movieid+
                                ","+
                                allData.data[i].movie.heat+
                                ')"><i class="layui-icon layui-icon-heart" style="font-size: 30px"></i></button>';
                        }
                        else{
                            movieInfo+= '<button style="background-color:transparent;border-style:none;" type="button" onClick="uncollect(' +
                                        movieid+
                                        ')"><i class="layui-icon layui-icon-heart-fill" style="font-size: 30px;color: red"></i></button>';
                        }
                    }
                });


                movieInfo+='</div>'
                document.getElementById(td).innerHTML = movieInfo;
                document.getElementById(name).innerHTML = allData.data[i].movie.moviename;
                document.getElementById(rate).innerHTML = allData.data[i].movie.rate;
                document.getElementById(href).setAttribute("href", detailURL);
                document.getElementById(img).setAttribute("src", imgURL);
                document.getElementById(year).innerHTML=allData.data[i].movie.updateyear;
            }
            return false;
        }



        function logout(){
            $.ajax({
                url: '[[@{/user/logout}]]',    //thymeleaf在ajax中设置地址行形式
                type: "GET",
                dataType: "String",
                success: function (data) {
                },
            });
            window.location.reload();
            return false;
        }

    </script>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;


            background: url(../../static/movieBACK.jpg) no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
        }
        .container{
            width: 900px;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            padding: 0px;
            z-index: 130;
            border-radius: 8px;
            background-color: #fff;
            box-shadow: 0 3px 18px rgba(100, 0, 0, .5);
            font-size: 16px;

        }
    </style>
</head>
<body>
<link type="text/css" href="../../static/headerBar.css" rel="stylesheet">


    <div class="container">
        <div class="header-bar">
            <ul class="horizontal">
                <li>
                    <button id="allMovieBtn" onclick="allMovie()">全部电影</button>
                </li>
                <li>
                    <button id="trendMovieBtn" onclick="trendMovie()">热门电影</button>
                </li>
                <li>
                    <button id="recommendBtn" onclick="recommend()">推荐电影</button>
                </li>


                <li class="search-box">
                    <input id="search-input" type="text" class="input" placeholder="请输入电影名称">
                    <!--placeholder是文本框中的提示文字-->
                    <input type="button" value="搜索" class="button"
                           onclick="search(document.getElementById('search-input').value)">
                </li>

                <li class="user" style="float: right;">
                    <button id="userBtn" onclick="">用户</button>
                    <div id="userManage" class="userManage">

                        <!--        <a  href="javascript:void(0);" onclick="serchByType(1)">Link 1</a>-->
                    </div>
                </li>

            </ul>
        </div>

        <!--<br>-->

        <div id="search-by-year-label" class="search-by-year-label">
        </div>


        <div class="movie-show" style="margin: 10px 0 0">
            <table class="layui-table" style="width: 800px;margin: 0px auto">
                <tr>
                    <td id="td0"></td>
                    <td id="td1"></td>
                </tr>
                <tr>
                    <td id="td2"></td>
                    <td id="td3"></td>
                </tr>
                <tr>
                    <td id="td4"></td>
                    <td id="td5"></td>
                </tr>
                <tr>
                    <td id="td6"></td>
                    <td id="td7"></td>
                </tr>
                <tr>
                    <td id="td8"></td>
                    <td id="td9"></td>
                </tr>

            </table>


            <footer style="text-align: center;">
                <button type="button" onclick="prevPage()">
                    上一页
                </button>
                <span>第 <lable id="currentPage">0</lable> 页/共 <lable id="totalPage">0</lable> 页</span>
                <button type="button" onclick="nextPage()">
                    下一页
                </button>
            </footer>

        </div>
    </div>
<!-- body 末尾处引入 layui -->
<script src="../../static/layui/layui.js"></script>
</body>
</html>